{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>【公司办公用品区域购买分析和销售预测系统】-登录</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.css' %}">
    <style>
        body {
            background-image: url('{% static 'img/背景图.jpg' %}');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
    </style>
</head>
<body>
<div class="col-md-6 col-md-push-3 modal-content" style="margin-top: 140px; padding: 30px 0">
    <div class="row">
        <div class="col-md-6">
            <img class="img-circle" src="{% static 'img/办公用品.png' %}" alt="LOGO" style="width: 100%; margin-left: 30px">
        </div>
        <div class="col-md-6">
            <h3 class="text-center" style="margin-bottom: 30px">登录页面</h3>
            <div class="row">
                <div class="col-md-10 col-md-push-1">
                    <form method="post">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="user">用户名</label>
                            <input type="text" id="user" class="form-control" placeholder="请输入用户名"/>
                        </div>
                        <div class="form-group">
                            <label for="pwd">密码</label>
                            <input type="password" id="pwd" class="form-control" placeholder="请输入密码"/>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-8">
                                    <label for="valid_code">验证码</label>
                                    <input type="text" class="form-control" id="valid_code" placeholder="(点击图片刷新验证码)"/>
                                </div>
                                <div class="col-md-4">
                                    <img style="margin-left: -20px; margin-top: 13px" id="valid_code_img"
                                         width="90" height="40" src="{% url 'get_validCodeImg' %}" alt="验证码"/>
                                </div>
                            </div>
                        </div>
                        <input type="button" id="login_btn" class="btn btn-success" value="登录"/><span
                            id="error">{{ msg }}</span>
                        <a href="{% url 'register' %}" class="btn btn-default pull-right">注册</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js' %}"></script>
<script>
    // 验证码点击刷新
    $("#valid_code_img").click(function () {
        $(this)[0].src += "?"
    });

    // 登录验证
    $("#login_btn").click(function () {
        $.ajax({
            url: "",
            type: "post",
            data: {
                user: $("#user").val(),
                pwd: $("#pwd").val(),
                valid_code: $("#valid_code").val(),
                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
            },
            success: function (data) {
                console.log(data.msg);

                if (data.user) {
                    if (location.search) {
                        location.href = location.search.slice(6)
                    } else {
                        location.href = "/index/"
                    }
                } else {
                    $("#error").text(data.msg).css({"color": "red", "margin-left": "10px"});
                    {# 1s后报错消失 #}
                    setTimeout(function () {
                        $("#error").text("");
                    }, 1000)

                }
            }
        });
    })
</script>
</body>
</html>